<template>
    <div class="shopbody">
        <!-- 顶部 -->
        <div class="top">
            <!-- 输入框：防抖 -->
            <div class="topinput">
                <div class="topin">
                    <div class="icon-left">
                        <img :src="leftSearch" style="" alt="Left Icon">
                    </div>
                    <input type="text" v-model="inputValue" placeholder="测试防抖">
                    <div class="icon-right">
                        <img :src="rightCamera" alt="Right Icon">
                    </div>
                </div>
            </div>
            <!-- 按钮 -->
            <img :src="shoppingCart" class="img1" alt="">
            <img :src="allApplication" class="img2" alt="" @click="toggleClass">
        </div>
        <!-- 轮播图 -->
        <div class="carousel">
            <div class="slides" :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
                <div v-for="(slide, index) in slides" :key="index" class="slide">
                    <img :src="slide" alt="">
                </div>
            </div>
        </div>
        <!-- 广告 -->
        <div class="container">
            <div class="advers">
                <div class="box" v-for="(item, index) in boxs" :key="index">
                    <img :src="item.img" style="width: 36px;" alt="">
                    <div>{{ item.name }}</div>
                </div>
            </div>
        </div>
        <!-- 分类：节流 -->
        <div class="types">
            <div class="buttons">
                <button class="ele" v-for="(item, index) in types" :key="index" :class="{ 'eleAvtive': item.active }"
                    @click="throttledToggle(index)">
                    {{ item.label }}</button>
            </div>
        </div>
        <!-- 商品·单双行排列 -->
        <div class="goods">
            <!-- 事件委托 -->
            <div :class="isActive ? 'double' : 'single'" @click="entrustGo">
                <div class="goodbox" v-for="item in list" :key="item._id" :data-id="item._id">
                    <img src="../assets/vgoods.png" alt="">
                    <div>
                        <span class="itemtag">{{ item.tag }}</span>
                        {{ item.name }}
                    </div>
                    <div class="itemno">高质 优惠 精美 便捷</div>
                    <div>
                        <span class="itemprice">￥{{ item.price }}</span>&nbsp;
                        <span class="itemdel">￥{{ item.price * 1.8 }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { useRouter } from 'vue-router'
import carousel1 from '@/assets/shopViewImage/carousel-1.jpg'
import carousel2 from '@/assets/shopViewImage/carousel-2.jpg'
import carousel3 from '@/assets/shopViewImage/carousel-3.jpg'
import carousel4 from '@/assets/shopViewImage/carousel-4.jpg'
import hotSell from '@/assets/shopViewImage/hot-sell.png'
import specialOffer from '@/assets/shopViewImage/special-offer.png'
import blindBox from '@/assets/shopViewImage/blind-box.png'
import customization from '@/assets/shopViewImage/customization.png'
import shoes from '@/assets/shopViewImage/shoes.png'
import accessories from '@/assets/shopViewImage/accessories.png'
import menClothing from '@/assets/shopViewImage/men-clothing.png'
import womenClothing from '@/assets/shopViewImage/women-clothing.png'
import shoppingCart from '@/assets/shopViewImage/shopping-cart.svg'
import allApplication from '@/assets/shopViewImage/all-application.svg'
import rightCamera from '@/assets/shopViewImage/right-camera.png'
import leftSearch from '@/assets/shopViewImage/left-search.png'

const router = useRouter()

const currentSlide = ref(0);
const slides = ref([carousel1, carousel2, carousel3, carousel4,])
const types = ref([
    { label: '新品热销', active: true },
    { label: '特价', active: false },
    { label: '饰品', active: false },
    { label: '配件', active: false },
    { label: '鞋帽', active: false },
    { label: '男装', active: false },
    { label: '美妆', active: false },
    { label: '潮玩', active: false }
])
let boxs = ref(
    [{ name: '热销', img: hotSell }, { name: '特惠', img: specialOffer }, { name: '盲盒', img: blindBox }, { name: '定制', img: customization }, { name: '男装', img: menClothing }, { name: '女装', img: womenClothing }, { name: '佩饰', img: accessories }, { name: '鞋子', img: shoes },])
let list = ref([
    { _id: 'd44s56d4s64cd6d126sd', name: '手电筒', price: 28, tag: '特价' },
    { _id: 'as65d4f6a4s6d1a5s6d', name: '运动水壶', price: 35, tag: '新品' },
    { _id: 'f4g5d4f6g54h6f54gh5', name: '笔记本电脑', price: 2999, tag: '热卖' },
    { _id: 'g6d4s5g4d6f5g4s6g4sd', name: '手机支架', price: 15, tag: '特价' },
    { _id: 'j8k4d6s5d4f6g4s6d5g', name: '运动耳机', price: 68, tag: '特价' },
    { _id: 'l4j5s6g4d6s54d6f5g4d', name: '书包', price: 40, tag: '热卖' },
    { _id: 'm4h5f4g6s5d4f6g4s6d', name: '雨伞', price: 20, tag: '特价' },
    { _id: 'n4m5g4h5f4g6s54g65s', name: '充电宝', price: 80, tag: '新品' },
    { _id: 'o5k4d6s5d4f6g4s6d5g', name: '防水手表', price: 120, tag: '热卖' },
    { _id: 'p4j5s6g4d6s54d6f5g4d', name: '数据线', price: 10, tag: '特价' },
    { _id: 'q4h5f4g6s5d4f6g4s6d', name: '游戏手柄', price: 50, tag: '清仓' },
    { _id: 'r4m5g4h5f4g6s54g65s', name: '运动T恤', price: 25, tag: '特价' },
    { _id: 's5k4d6s5d4f6g4s6d5g', name: '遮阳帽', price: 15, tag: '新品' },
    { _id: 't4j5s6g4d6s54d6f5g4d', name: '电子书阅读器', price: 150, tag: '热卖' },
    { _id: 'u4h5f4g6s5d4f6g4s6d', name: '户外背包', price: 70, tag: '特价' },
    { _id: 'v4m5g4h5f4g6s54g65s', name: '蓝牙耳机', price: 45, tag: '清仓' },
    { _id: 'w5k4d6s5d4f6g4s6d5g', name: '游泳镜', price: 30, tag: '特价' },
    { _id: 'x4j5s6g4d6s54d6f5g4d', name: '智能手表', price: 200, tag: '新品' },
    { _id: 'y4h5f4g6s5d4f6g4s6d', name: '运动鞋', price: 90, tag: '热卖' },
    { _id: 'z4m5g4h5f4g6s54g65s', name: '护膝', price: 12, tag: '特价' }
])
const isActive = ref(true);

// 切换单双行
const toggleClass = () => {
    isActive.value = !isActive.value;
};

// 节流
// ————————————————————————————————————————————
const throttledToggle = (index: Number) => {
    if (!throttledToggle.timer) {
        toggleActive(index);
        throttledToggle.timer = setTimeout(() => {
            throttledToggle.timer = null;
        }, 2000);
    }
};
const toggleActive = (index: Number) => {
    types.value.forEach((button, i) => {
        button.active = (i === index);
    })
};

// 防抖
// ————————————————————————————————————————————
// 输入框的值
const inputValue = ref('')
// 防抖后的值
const debouncedValue = ref('')
// 设置计时器id
let debounceTimerId: any;
// 定义更新防抖值的函数
const updateDebouncedValue = (value: any) => {
    // 清除之前的定时器
    clearTimeout(debounceTimerId);
    // 设置新的定时器，在500毫秒后更新防抖值
    debounceTimerId = setTimeout(() => {
        debouncedValue.value = value;
        // 控制台打印输入的值，可用于调试
        console.log('你输入了：', value);
    }, 500);
};
// 监听输入框值的变化
watch(() => inputValue.value,
    (newValue) => {
        // 每次值变化时调用更新防抖值的函数
        updateDebouncedValue(newValue);
    }
);
// ————————————————————————————————————————————


// 事件委托
// ————————————————————————————————————————————
// 定义事件处理函数
const entrustGo = (event: any) => {
    // 判断事件目标元素是否为 ".goodbox"
    if (event.target.classList.contains('goodbox')) {
        // 执行相应的逻辑
        infoGo(event.target.getAttribute('data-id'));
    } else {
        // 嵌套使用
        entrustGoC(event.target.parentNode)
    }
};
// 定义嵌套事件处理函数
const entrustGoC = (target: any) => {
    // 判断事件目标元素是否为 ".goodbox"
    if (target.classList.contains('goodbox')) {
        // 执行相应的逻辑
        infoGo(target.getAttribute('data-id'));
    } else {
        // 嵌套使用
        entrustGoC(target.parentNode)
    }
}
const infoGo = (id: string) => {
    let item = list.value.find(item => item._id === id);
    router.push({
        path: 'info',
        query: item,
    })
}
// ————————————————————————————————————————————


// 轮播图
const nextSlide = () => {
    currentSlide.value = (currentSlide.value + 1) % slides.value.length;
};
let timer = setInterval(nextSlide, 2000)
onMounted(() => {
    // 在组件挂载时启动计时器
    timer
});
onUnmounted(() => {
    // 在组件卸载时清除计时器
    clearInterval(timer)
});

</script>

<style lang='less' scoped>
.shopbody {
    padding-top: 5px;
    width: 390px;
}

.top {
    padding-left: 19px;
    padding-right: 29px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 99;
}

.topin {
    margin: 6px 0;
}

.topinput {
    position: relative;
    width: 263px;
    display: inline-block;
}

.topinput input {
    width: 222px;
    height: 44px;
    border-radius: 180px;
    border: 0;
    background-color: #F0F0F0;
    padding-left: 41px;
    color: rgb(115, 115, 115);
    font-size: 14px;
}

.top img {
    vertical-align: middle;
}

.top .img1 {
    margin-left: 8PX;
}

.top .img2 {
    margin-left: 19PX;
}

.icon-left,
.icon-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.icon-left {
    left: 11px;
}

.icon-right {
    right: 11px;
}


.carousel {
    overflow: hidden;
    margin-top: 60px;
    width: 390px;
}

.slides {
    display: flex;
    transition: transform 0.5s ease;
}

.slide {
    flex: 0 0 auto;
}

.slide img {
    width: 390px;
    height: 200px;
    overflow: hidden;
}

.container {
    width: 350px;
    margin: 21px auto;
}

.advers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.box {
    height: 72px;
    text-align: center;
}

.types {
    width: 350px;
    height: 37px;
    margin: 0 auto;
}

.buttons {
    display: flex;
    overflow-x: auto;
    /* 横向滚动 */
    white-space: nowrap;
    /* 水平排列不换行 */
}

.ele {
    display: inline-block;
    min-width: 80px;
    height: 35px;
    line-height: 35px;
    margin-right: 18px;
    border-radius: 20px;
    border: 1px solid #ccc;
    background-color: #fff;
}

.eleAvtive {
    border: 0;
    color: white;
    background-color: #F999AD;
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: transparent;
}

.goods {
    margin: 20px 10px;
}

.double {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(171px, 1fr));
    /* 每列宽度为171px */
    grid-template-rows: 228px;
    /* 每行高度为158px */
    grid-gap: 28px 13px;
    /* 行、列之间的间隔为13px、28px */
}

.goodbox {
    width: 126px;
    margin: 15px 23px;
}

.itemno {
    color: rgb(176, 182, 182);
    margin: 8px 0;
    font-size: small;
}

.itemtag {
    font-size: small;
    color: #F0F0F0;
    padding: 4px;
    border-radius: 4px;
    background-color: #df4343;
}

.itemprice {
    color: #df4343;
}

.itemdel {
    color: rgb(176, 182, 182);
    text-decoration: line-through;
    font-size: small;
}
</style>